<extend name="Public:Base" />
<block name="head">
    <link href="__PUBLIC__/Js/lightbox/lightbox.css" rel="stylesheet">
	<style type="text/css">
		.Photo{display: inline-block;width: 210px;height:168px;overflow:hidden;margin-right: 13px;margin-bottom: 20px;padding: 0;border:7px solid #FFFFFF;box-shadow: 1px 1px 1px #AAAAAA;text-align: center;}
		.Photo:hover{box-shadow:1px 1px 7px #777777;}
		/*.Photo img{margin-top: expression(( 168 - this.height ) / 2); }*/
	</style>
</block>
<block name="content">
	<h2 class="title">我测相片</h2>
	<volist name="PhotoList" id="vo">
	<div class="Photo">
		<a href="{$vo.img}" title="{$vo.title}" class="thumbnail">
			<img src="{$vo.thu_img}" alt="{$vo.title}">
		</a>
	</div>
	</volist>
	<div class="pagenav">{$PhotoPage}</div>
</block>
<block name="__body">
	<script type="text/javascript" src="__PUBLIC__/Js/lightbox/lightbox.min.js"></script>
	<script type="text/javascript">
    	$(function() {
    		$('.Photo').each(function(){
    			var xx=$(this).find('img')[0];
    			var w=xx.naturalWidth;
    			var h=xx.naturalHeight;
    			if(w>h){
    				xx.style.width='210px';
    			}else if(w<h){
    				xx.style.height='168px';
    			}else{
    				xx.style.width='210px';
    				xx.style.height='168px'; 				
    			}
    		});
			$('.thumbnail').lightBox({fixedNavigation:true});
		});
	</script>
</block>